<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>PPT</title>
        <script src="./ppt.js"></script>
        <link rel="stylesheet" href="./css/ppt.css">
        <link rel="stylesheet" href="./css/animate.css">
        <!-- <link rel="stylesheet" href="./themes/red-web.css"> -->
        <link rel="stylesheet" href="./themes/test.css">
        <style>
            .pt {
                padding-top: 200px !important;
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                padding: 0;
                margin: 0;
            }
        </style>
    </head>

    <body>
        <div class="body">
            <div id="ppt">
                <ppage-c class="pt">
                    <fly-t><h1>网络传输原理</h1></fly-t><br>
                    <fly-b><h4>详解网络的奥秘</h4></fly-b>
                </ppage-c>
                <ppage-c x="600" rotate-y="90">
                    <h1><fly-t>目录</fly-t></h1>
                    <hr width="70%">
                    <div class="mx-auto" style="width: 600px;">
                        <ol>
                            <li><fly-l>总览</fly-l></li>
                            <li><fly-l>ARP</fly-l></li>
                            <li><fly-l>TCP&UDP</fly-l></li>
                            <li><fly-l>HTTP</fly-l></li>
                        </ol>
                    </div>
                </ppage-c>
                <ppage-c x="0" y="1000" class="pt">
                    <h1><fly-t>01-总览</fly-t></h1>
                    <p><fly-b>大概先看一眼</fly-b></p>
                </ppage-c>
                <ppage x="1000" y="1000" rotate-y="90">
                    <h1><scale-in>OCI七层协议</scale-in></h1>
                    <div class="mx-auto" style="width: 100%;">
                        <fly-b>
                            <ol>
                                <li>应用层:最顶层的东西,比如你常见的HTTP,其实它虽然看起来是一个层,但也可以再次分层,比如,据说HTTPS就将其分为了两层.</li>
                                <li>表示层:表示层并没有什么特殊的东西,只是将你的信息进行一些格式转换,加密解密,压缩和解压之类的东西.</li>
                                <li>会话层:会话层用于建立和管理各个应用的通信,包装了前几层的一些东东.</li>
                                <li>传输层:传输层包含TCP和UDP两个大玩意,是底层传输数据的协议.</li>
                                <li>网络层:网络层解决了进行寻找传输路径的功能,这一层的主要设备是路由器.</li>
                                <li>数据链路层:定义了如何让格式化数据进行传输，以及如何让控制对物理介质的访问。这一层通常还提供错误检测和纠正，以确保数据的可靠传输.</li>
                                <li>物理层:你的那些计算机,网线.毕竟没有这些玩意你打算给谁发数据?当然也定义了一点传输基础bit的方法.</li>
                            </ol>
                        </fly-b>
                    </div>
                </ppage>
                <ppage x="2000" y="1000" z="300" rotate-y="180">
                    <h1>TCP/IP四层协议</h1>
                    <div class="mx-auto" style="width: 100%;">
                        <ol>
                            <li>应用层,对应之前的应用层,表示层和会话层</li>
                            <li>传输层</li>
                            <li>网络层</li>
                            <li>网络接口层,对应数据链路层</li>
                            <li>硬件层,对应物理层</li>
                        </ol>
                    </div>
                </ppage>
                <ppage-c x="0" y="2000" class="pt">
                    <h1><fly-t>02-ARP</fly-t></h1>
                    <p><fly-b>信息课上我们学过IP协议,可是根据IP协议又是如何找到你这台电脑的呢?</fly-b></p>
                </ppage-c>
                <ppage class="pt" y="2000" rotate-y="180" z="-20">
                    <p>
                        &nbsp;&nbsp;&nbsp;&nbsp;arp协议是当为了根据IP地址获取你的电脑的协议,由于实际中几乎用不到(除非你想当黑客,所以作为理论了解即可,来看看:
                    </p>
                    <div align="center">
                        <scale-in>
                            <a href="https://baike.baidu.com/item/ARP/609343?secondId=567373">
                                一个链接
                            </a>
                        </scale-in>
                    </div>
                </ppage>
                <ppage-c x="0" y="3000" class="pt">
                    <h1><fly-t>03-TCP&UDP</fly-t></h1>
                    <p><scale-in>网络传输中的两个老家伙!</scale-in></p>
                </ppage-c>
                <ppage x="0" y="3000" z="-20" rotate-y="180" style="padding-top: 100px;">
                    <fly-l><h2>TCP</h2></fly-l>
                    <hr>
                    <p>
                        TCP与UDP是两种很常用的协议<br>
                        这里先介绍TCP.<br>
                        TCP是面向连接的协议,要想发送数据,你要先建立连接,然后再发送数据,最后关闭连接.<br>
                        TCP可以保证数据被接收到,用于要保证接受的连接.<br>
                        其中,连接的建立和关闭就经常被用来当做面试题,也就是我们常说的”三次握手,四次挥手”.<br>
                        这里就看看什么是三次握手和四次挥手.<br>
                    </p>
                </ppage>
                <ppage x="1000" y="3000">
                    <h2><scale-in>三次握手</scale-in></h2>
                    <hr>
                    <scale-in style="float:right;"><img src="./img/3cws.png" style="width: 50%;"></scale-in>
                    <p style="font-size: 20px;">
                        1）发送端首先发送一个带有SYN（synchronize）标志地数据包给接收方。<br>
                        2）接收方接收后，回传一个带有SYN/ACK标志的数据包传递确认信息，表示我收到了。<br>
                        3）最后，发送方再回传一个带有ACK标志的数据包，代表我知道你收到了，自此’握手‘结束,连接顺利的建立了。
                    </p>
                    <p style="font-size: 20px;">
                        Client：嘿，Server，是我，听到了吗?<br>
                        Server：我听到了，你能听到我的吗?<br>
                        Client：好的，我们互相都能听到对方的话，我们的通信可以开始了。<br>
                    </p>
                </ppage>

                <ppage x="1000" y="3000" z="-1" rotate-x="180">
                    <h2><scale-in>四次挥手</scale-in></h2>
                    <hr>
                    <scale-in style="float:right;"><img src="./img/4chs.png" style="width: 50%;"></scale-in>
                    <p style="font-size: 20px;">
                         1）Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。<br>
                         2）Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。<br>
                         3）Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。<br>
                         4）Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手

                    </p>
                    <p style="font-size: 20px;">
                        1）Client：我所有东西都说完了<br>
                        2）Server：我已经全部听到了，但是等等我，我要安排后事<br>
                        3）Server：好了，我安排完了(你可以安心地去了<br>
                        4）Client：好的，那我们的通信结束l
                    </p>
                </ppage>

                <ppage-c style="padding-top: 100px;" x="1600" y="3000" z="-300" rotate-y="90">
                    <h2><fly-t>UDP</fly-t></h2>
                    <hr>
                    <p align="left">
                        <fly-b>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;相比于TCP的连接,
                        以及繁复的握手挥手,UDP则简单粗暴的多,如果说TCP是打了个电话,要先确定接通,关闭也要确认通知,那么UDP就是送信,知道位置,立刻就能发送,至于是否能接收到,则无法做出保证.所以,UDP发送数据消耗的时间(也就是qyc同学特别关注的常数)非常小.而除此之外,他还有其他几个功能,就是广播和组播.广播就是把送一封信变成拿着大喇叭喊,周围所有人全都能接收到.而组播就是同时向多个电脑发出信息,类似QQ的群.
                        </fly-b>
                    </p>
                </ppage-c>

                <ppage-c x="1600" y="3000" z="-1000" rotate-y="180">
                    <h2><fly-l>一点点Python的接口</fly-l></h2>
                    <hr>
                    <p align="left" style="font-size: 20px;">
                        反正大家也都学过点Python,虽然可能学的不多深,不过将就着用吧.<br>
                        先说客户端.<br>
                        要想进行数据收发,你就必须引入套接字的库 import socket #内置库,无需安装<br>
                        然后,你要创建一个套接字实例 s=socket.socket(socket.AF_INET,使用的方式)
                        #方式可以是TCP和UDP,tcp是socket.SOCK_STREAM,udp是socket.SOCK_DREAM.<br>
                        TCP部分:<br>
                        接下来,作为一个客户端,你要建立连接: s.connect(address) #address是一个元组,格式为 (ip,port)<br>
                        然后,你就可以愉快地收发信息了.方式是s.send(内容)发送字节信息,s.recv(size)接收字节信息,注意只接收字节信息,你需要手动encode和decode.<br>
                        最后不要忘记与对方挥手: s.close()<br>
                        UDP部分:<br>
                        简单粗暴<br>
                        接收: s.recvfrom(port) 返回一个二元组,分别是数据和对方的地址.<br>
                        发送 s.sendto(内容,地址) 地址还是之前说的那个元组格式.<br>
                        最后也关闭一下,释放资源:s.close()<br>
                    </p>
                </ppage-c>
                <ppage-c x="3000" y="3000">
                    <h2>
                        <bomb delay="0">推荐一些资源:</bomb>
                    </h2>
                    <hr>
                    <p align="left">
                        关于Python的接口这部分,其实是有<rock delay="1">很多坑</rock>的,这里推荐几篇文章,大家可以看看,可以避免雷区.<br>
                        基础:https://blog.csdn.net/abc_12366/article/details/87062950<br>
                        坑:https://www.jianshu.com/p/ad17e71fab7e<br>
                        最后放一个博主,写的文章也不少,经常介绍一下技术性的东西:<br>
                        <br></br>
                        <rock >
                            https://www.jianshu.com/u/91bc345f7c84
                        </rock>
                    </p>
                </ppage-c>
                <ppage-c x="0" y="4000" class="pt">
                    <h1><fly-t>04-HTTP部分</fly-t></h1>
                    <p><fly-b>可能是我们最常用的网络协议了!</fly-b></p>
                </ppage-c>
                <ppage-c x="1000" y="4000">
                    <h2>
                        <fly-t>HTTP的版本</fly-t>
                    </h2>
                    <scale-in><hr></scale-in>
                    <p align="left">
                        HTTP既然作为我们经常用到的网络协议,多了解一点似乎也没什么坏处.
                        这也是为什么这一部分比较长.
                        首先,我们要了解一件事.
                        HTTP有好多的版本(废话)现在已经发布了3.0,不过我们最常用的,可能还是元老1.1.
                        怎么证明?
                        <h2><scale-in><a href="https://www.baidu.com/">证明</a></scale-in></h2>
                        
                        <br>
                        是的,现在我们看到了他的版本,那么,其他的部分分别都是什么呢?
                        首先,让我们观察一段HTTP的原始信息:
                    </p>
                </ppage-c>
                <ppage x="1000" y="4000" z="-100" rotate-y="180" scale="0.5" style="border:10px solid dodgerblue">
                    GET / HTTP/1.1<br>
                    Host: www.baidu.com<br>
                    Connection: keep-alive<br>
                    Cache-Control: max-age=0<br>
                    Upgrade-Insecure-Requests: 1<br>
                    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
                    Chrome/80.0.3987.162 Safari/537.36<br>
                    Sec-Fetch-Dest: document<br>
                    Accept: ...<br>
                    Sec-Fetch-Site: none<br>
                    Sec-Fetch-Mode: navigate<br>
                    Sec-Fetch-User: ?1<br>
                    Accept-Encoding: gzip, deflate, br<br>
                    Accept-Language: zh-CN,zh;q=0.9,en;q=0.8<br>
                    Cookie: PSTM=1585056219; BD_UPN=12314753; <br><br>
                    <bomb>
                        每行之间是\r\n,最后结尾有两个换行,也是\r\n.
                    </bomb>
                </ppage>
                <ppage-c x="1600" y="4000" rotate-y="90" z="400">
                    让我们接下来看看POST请求的<rock delay="1">请求体</rock><br>
                    因为POST的请求体<rock delay="1">非常之长</rock>,所以我决定带你们走一遍,而不是把他放到PPT上.<br>
                    让我们看看这个
                    <scale-in>
                        <a href="http://lab1.xseclab.com/upload1_a4daf6890f1166fd88f386f098b182af/">
                            目标站点
                        </a>
                    </scale-in>
                    <br>
                </ppage-c>
                <ppage-c style="padding-top: 200px;" x="3000" y="4000">
                    然后就是响应了,让我们还是用一个目标站点去看看<br><br>
                    <scale-in>
                        <rock delay="1"><a href="http://magic.bairuo.ltd:40000/">
                                目标站点
                            </a></rock>
                    </scale-in>
                </ppage-c>
                <ppage-c x="4000" y="4000">
                    <h1>源码部分</h1>
                    <hr>
                    <p align="left">
                        接下来,我们可以看看,看看我写的一个简单的Python服务器,它没有使用什么额外的库,而是使用socket模块(是的,就是我之前介绍给你们的那个)做出来的,这样可以让我们见识一下HTTP的深层原理.
                    </p>
                    <bomb delay="1">
                        <h3>
                            <i>
                                让我们看看
                            </i>
                        </h3>
                    </bomb>
                </ppage-c>
                <opage x="2000" y="2000" z="10000" scale="10" style="line-height: 600px;">
                    <fly-bl>
                        <bomb delay="2">
                            <h2>
                                <loop-rotate>⚡</loop-rotate>谢谢,是的你们猜的很对,我讲完了<loop-rotate>⚡</loop-rotate>
                            </h2>
                        </bomb>
                    </fly-bl>
                </opage>
            </div>
        </div>
        <script>
            ppt.init();
            document.querySelector('html').requestFullscreen();
        </script>
    </body>

</html>